/**
 * 
 */
// ColumnPanel
function createColumnPanel() {
	var panel = new Ext.Panel({
		width : 400,
		heigth : 400,
		title : "父面板",
		layout : "column",
		items : [ {
			title : "面板1",
			columnWidth : 0.25,
			height : 180,
			layout : "column",
			items : [ {
				title : "子面板1"
			}, {
				title : "子面板2"
			} ]
		}, {
			title : "面板2",
			columnWidth : 0.25,
			html : "lilei",
			height : 50
		}, {
			title : "面板3",
			html : "hi",
			columnWidth : 0.25,
			height : 50
		}, {
			title : "面板4",
			html : "hanmeimei",
			columnWidth : 0.25,
			height : 50
		} ]
	});
	panel.render("d1");
}

// BorderPanel
function createBorderPanel() {
	var panel = new Ext.Panel({
		width : 600,
		height : 500,
		title : "父面板",
		layout : "border",
		items : [ {
			title : "西(菜单)",
			region : "west",
			// 可拉伸的
			split : true,
			// 可折叠的
			collapsible : true,
			height : 150,
		}, {
			title : "南",
			region : "south",
			height : 50,
		}, {
			title : "北",
			region : "north",
			height : 30,
		}, {
			title : "东(右边)",
			region : "east",
			height : 100,
		}, {
			title : "中",
			region : "center",
			layout : "border",
			items : [ {
				title : "子面板1",
				region : "west",
				split : true,
				width : "50%"
			}, {
				title : "子面板2",
				region : "center"
			// center不用加width,一般border布局都要有center
			} ]
		} ]
	});
	panel.render("d1");
}
// FitPanel 子元素的大小和父容器的大小一致
function createFitPanel() {
	var panel = new Ext.Panel({
		width : 600,
		height : 500,
		title : "父面板",
		layout : "fit",
		items : [ {
			title : "西(菜单)",

			width : 150,
		}, {
			title : "南（底部）",
			height : 50,
		} ]
	});
	panel.render("d1");
}

// AccordionPanel 手风琴
function createAccordionPanel() {
	var panel = new Ext.Panel({
		width : 600,
		height : 500,
		title : "父面板",
		layout : "accordion",
		items : [ {
			title : "西(菜单)",
			items : [ {
				title : "子面板1"
			}, {
				title : "子面板2"
			}, {
				title : "子面板3"
			}, {
				title : "子面板4"
			} ]
		}, {
			title : "南（底部）",
		} ]
	});
	panel.render("d1");
}

// AnchorPanel
function createAnchorPanel() {
	var panel = new Ext.Panel({
		width : 600,
		height : 500,
		title : "父面板",
		layout : "anchor",
		items : [ {
			title : "西(菜单)",
			// anchor:父容器的宽(可以是绝对值、百分比)和高
			anchor : "50% 30%",
			html : "面板1",
		}, {
			title : "南（底部）",
			anchor : "-50 30%",
			html : "面板2"
		} ]
	});
	panel.render("d1");
}
Ext.onReady(function() {
	createAnchorPanel();
});